* {
    padding: 0px;
    margin: 0px;
}

.cont {
    width: 960px;
    height: 500px;
    animation: cont 20s infinite forwards;
}

@keyframes cont {
    0% {
        background-color: rgb(26, 24, 41);
    }

    50% {
        background-color: rgb(214, 170, 255);
    }

    100% {
        background-color: rgb(26, 24, 41);
    }
}

.tl_bottpn_a {
    position: absolute;
    top: 480px;
    border-right: 20px solid transparent;
    z-index: 9;
    animation: tl_bottpn_a 20s infinite forwards;
}

@keyframes tl_bottpn_a {
    0% {
        border-top: 20px solid rgb(34, 1, 1);
    }

    50% {
        border-top: 20px solid rgb(92, 2, 2);
    }

    100% {
        border-top: 20px solid rgb(34, 1, 1);
    }
}

.tl_bottpn_b_box {
    position: absolute;
    top: 470px;
    float: left;
    z-index: 9;
}

.tl_bottpn_b_box div {
    float: left;
}

.tl_bottpn_b {
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    animation: tl_bottpn_b 20s infinite forwards;
}

@keyframes tl_bottpn_b {
    0% {
        border-bottom: 30px solid rgb(0, 0, 0);
    }

    50% {
        border-bottom: 30px solid rgb(255, 94, 0);
    }

    100% {
        border-bottom: 30px solid rgb(0, 0, 0);
    }
}

.tl_bottpn_c {
    position: absolute;
    top: 480px;
    left: 940px;
    border-top: 20px solid rgb(92, 2, 2);
    border-left: 20px solid transparent;
    z-index: 9;
    animation: tl_bottpn_c 20s infinite forwards;
}

@keyframes tl_bottpn_c {
    0% {
        border-top: 20px solid rgb(0, 0, 0);
    }

    50% {
        border-top: 20px solid rgb(92, 2, 2);
    }

    100% {
        border-top: 20px solid rgb(0, 0, 0);
    }
}


/* 左边小型组合三角形  */
.tlBox_a_left {
    width: 0;
    height: 0;
    position: absolute;
    top: 300px;
    border: 100px solid transparent;
    animation: tlBox_a_left 20s infinite forwards;
}

@keyframes tlBox_a_left {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(82, 82, 82);
        border-right-color: rgb(82, 82, 82);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_a_left_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -100px;
    right: 0px;
    border: 50px solid transparent;
    border-right-color: rgb(255, 255, 255);
    animation: tlBox_a_left_top 20s infinite forwards;
}

@keyframes tlBox_a_left_top {
    0% {
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-right-color: rgb(255, 255, 255);
    }

    100% {
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_a_right {
    width: 0;
    height: 0;
    position: absolute;
    top: 300px;
    left: 200px;
    border: 100px solid transparent;
    animation: tlBox_a_right 20s infinite forwards;
}

@keyframes tlBox_a_right {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(141, 9, 9);
        border-left-color: rgb(141, 9, 9);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }
}

.tlBox_a_right_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -100px;
    left: -100px;
    border: 50px solid transparent;
    animation: tlBox_a_right_top 20s infinite forwards;
}

@keyframes tlBox_a_right_top {
    0% {
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-left-color: rgb(252, 121, 121);
    }

    100% {
        border-left-color: rgb(0, 0, 0);
    }
}



/* 右边小型组合三角形  */
.tlBox_b_left {
    width: 0;
    height: 0;
    position: absolute;
    top: 300px;
    left: 560px;
    z-index: 4;
    border: 100px solid transparent;
    animation: tlBox_b_left 20s infinite forwards;
}

@keyframes tlBox_b_left {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(82, 82, 82);
        border-right-color: rgb(82, 82, 82);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_b_left_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -100px;
    right: 0px;
    border: 50px solid transparent;
    animation: tlBox_b_left_top 20s infinite forwards;
}

@keyframes tlBox_b_left_top {
    0% {
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-right-color: rgb(255, 255, 255);
    }

    100% {
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_b_right {
    width: 0;
    height: 0;
    position: absolute;
    top: 300px;
    left: 760px;
    border: 100px solid transparent;
    animation: tlBox_b_right 20s infinite forwards;
}

@keyframes tlBox_b_right {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(95, 89, 0);
        border-left-color: rgb(95, 89, 0);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }
}

.tlBox_b_right_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -100px;
    left: -100px;
    border: 50px solid transparent;
    animation: tlBox_b_right_top 20s infinite forwards;
}

@keyframes tlBox_b_right_top {
    0% {
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-left-color: rgb(145, 100, 100);
    }

    100% {
        border-left-color: rgb(0, 0, 0);
    }
}

/* 中间大型组合三角形  */
.tlBox_c_left {
    width: 0;
    height: 0;
    position: absolute;
    top: 200px;
    left: 150px;
    z-index: 3;
    border: 150px solid transparent;
    animation: tlBox_c_left 20s infinite forwards;
}

@keyframes tlBox_c_left {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(207, 101, 101);
        border-right-color: rgb(207, 101, 101);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_c_left_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -150px;
    right: -50px;
    border: 50px solid transparent;
    z-index: 3;
    animation: tlBox_c_left_top 20s infinite forwards;
}

@keyframes tlBox_c_left_top {
    0% {
        border-right-color: rgb(0, 0, 0);
    }

    50% {
        border-right-color: rgb(255, 255, 255);
    }

    100% {
        border-right-color: rgb(0, 0, 0);
    }
}

.tlBox_c_right {
    width: 0;
    height: 0;
    position: absolute;
    top: 200px;
    left: 450px;
    z-index: 3;
    border: 150px solid transparent;
    animation: tlBox_c_right 20s infinite forwards;
}

@keyframes tlBox_c_right {
    0% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-bottom-color: rgb(125, 255, 157);
        border-left-color: rgb(125, 255, 157);
    }

    100% {
        border-bottom-color: rgb(0, 0, 0);
        border-left-color: rgb(0, 0, 0);
    }
}

.tlBox_c_right_top {
    width: 0px;
    height: 0px;
    position: relative;
    top: -150px;
    left: -150px;
    border: 50px solid transparent;
    animation: tlBox_c_right_top 20s infinite forwards;
}

@keyframes tlBox_c_right_top {
    0% {
        border-left-color: rgb(0, 0, 0);
    }

    50% {
        border-left-color: rgb(145, 100, 100);
    }

    100% {
        border-left-color: rgb(0, 0, 0);
    }
}

/* 太阳 */
.taiyang {
    width: 180px;
    height: 180px;
    position: absolute;
    left: 360px;
    top: 300px;
    background-color: yellow;
    border-radius: 50%;
    z-index: 1;
    animation: taiyang 20s infinite forwards;
    opacity: 0;
}

@keyframes taiyang {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        opacity: 1;
        transform: translateY(-250px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}